<template>
  <div class="dashbord">
    <div class="left">
      <div class="title">Dashbord&nbsp;总工作台</div>
      <div class="left_main">
        <DashbordMain></DashbordMain>
      </div>
    </div>
    <div class="right">
      <div class="tool">
        <MenuRight></MenuRight>
      </div>
      <div class="right_main">
        <div class="weather">
          <Weather></Weather>
        </div>
        <div class="statistics">
          <Statistics></Statistics>
        </div>
        <div class="visitor">
          <VisitorList></VisitorList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DashbordMain from "../components/DashbordMain.vue";
import Weather from "../components/Weather.vue";
import VisitorList from "../components/VisitorList.vue";
import MenuRight from "../components/MenuRight.vue";
import Statistics from "../components/Statistics.vue";
export default {
  name: "Dashbord",
  components: {
    DashbordMain,
    Weather,
    VisitorList,
    MenuRight,
    Statistics,
  },
};
</script>

<style scoped>
* {
  padding: 0;
  box-sizing: border-box;
}

.dashbord {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #dce7f8;
}
.left {
  float: left;
  width: 70%;
  height: 100%;
  background-color: #fcfdff;
  border-radius: 0 30px 30px 0;
}
.left_main {
  width: 100%;
  height: calc(100%-11vh);
  padding: 0px 10px;
}
.right {
  float: right;
  width: 30%;
  height: 100%;
  padding: 0;
}
.right_main {
  width: 100%;
  height: calc(100%-11vh);
  padding: 10px 10px;
}
.title {
  width: 100%;
  height: 10vh;
  text-align: left;
  padding: 3.5vh 1.5vw;
  vertical-align: middle;
  color: #000000;
  font-size: 1.7rem;
  font-weight: 500;
  border-bottom: 3px solid #e2e3e4;
}
.tool {
  width: 100%;
  height: 11vh;
}
.weather {
  width: 100%;
  height: 13vh;
  border-radius: 20px;
  box-shadow: 0px 5px 8px #888888;
}
.weather:hover {
  box-shadow: 0px 3px 12px #a3bffe;
}
.statistics {
  margin-top: 15px;
  width: 100%;
  height: 40vh;
}
.visitor {
  width: 100%;
  height: 29vh;
}
</style>